/*
  定义产品卡片组件
  鼠标悬浮时展示产品概要。
*/
export const productCardModel = (editor) => {
  editor.DomComponents.addType('product-card', {
    model: {
      defaults: {
        tagName: 'div',
        classes: ['product-card'],
        droppable: false,
        components: [
          {
            type: 'div',
            attributes: { class: 'card-content' },
            components: [
              {
                type: 'div',
                attributes: { class: 'card-image' },
                components: [
                  {
                    type: 'image',
                    src: 'https://cdn4.codesign.qq.com/prototypes/2023/08/03/xDP3923q32qn08ZwlKp03/apgsmrtqzvfi3x3v/916fbb3c05f25537980991ab0d0e74a6.png',
                  },
                ],
              },
              {
                type: 'div',
                attributes: { class: 'card-info' },
                components: [
                  {
                    type: 'h3',
                    content: 'BIM技术在深圳滨海大道交通综合改造工程中的应用',
                  },
                  {
                    type: 'image',
                    attributes: { 
                      class: 'card-image2',
                      src: 'https://cdn4.codesign.qq.com/prototypes/2023/08/03/xDP3923q32qn08ZwlKp03/apgsmrtqzvfi3x3v/be1c8bb0fc1fd751386300f73682fa92.png'
                    },
                  },
                  {
                    type: 'span',
                    content: 'BIM技术 | BIM咨询服务 | 市政BIM',
                    attributes: { class: 'card-tags' },
                  },
                ],
              },
            ],
          },
          {
            type: 'div',
            attributes: { class: 'card-overlay' },
            components: [
              {
                type: 'div',
                attributes: { class: 'overlay-content' },
                components: [
                  {
                    type: 'h3',
                    content: '项目概览',
                  },
                  {
                    type: 'text',
                    content: '本项目位于深圳市超级总部基地南侧,西临沙河西路,东至广深公路,全长约595km,其中总管长度1.56km,两侧分别设置268m及235m隧道出口;下沉隧道上部改造为地下车库空间。',
                    attributes: { class: 'overview-content' },
                  },
                ],
              },
              {
                type: 'div',
                attributes: { class: 'overlay-footer' },
                components: [
                  {
                    type: 'div',
                    attributes: { class: 'footer-left' },
                    content: '中建三局',
                  },
                  {
                    type: 'div',
                    attributes: { class: 'footer-right' },
                    content: '查看详情→',
                  },
                ],
              },
            ],
          },
        ],
        script() {
        
        },
        styles: `
          .product-card {
            position: relative;
            width: 400px;
            height: 370px;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            // transition: all 0.3s ease;
          }
          .card-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%; 
            background-color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            // transition: all 0.3s ease;
          }
          .card-image {
            width: 100%;
            height: 240px;
          }
          .card-image img {
            width: 100%;
            height: 240px;
            object-fit: cover;
          }
          .card-info {
            margin-top: 20px;
          }
          .card-image2 {
            margin: 10px 0;
            width: 135px;
            height: 31px;
          }
          .card-tags {
            font-family: 'Arial Normal', 'Arial';
            font-size: 13px; 
            color: #666; 
          }

          .card-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%; 
            background-color: rgba(0, 0, 0, 0.7);
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: all 0.3s ease;
            padding: 0 20px; 
          }
          .card-overlay .overlay-content {
            text-align: center;
            margin-bottom: 20px;
          }
          .card-overlay .overlay-content h3 {
            font-size: 24px; 
            font-weight: bold; 
          }
          .card-overlay .overlay-content .overview-content {
            font-size: 14px; /* 内容部分字体改小 */
          }

          .card-overlay .overlay-footer {
            display: flex;
            justify-content: space-between;
            width: 100%;
            position: absolute;
            bottom: 0;
          }
          .footer-left {
            flex: 7;
            background-color: rgba(242, 242, 242, 1);
            color: #333;
            padding: 20px 30px;
          }
          .footer-right {
            flex: 3;
            background-color: rgba(2, 167, 240, 1);
            color: #fff;
            padding: 20px 20px;
            text-align: center;
            cursor: pointer;
          }
          .footer-right:hover {
            background-color: #66b1ff;
          }

          .product-card:hover .card-overlay {
            opacity: 1;
          }
 
        `,
      },
    },
  });

  editor.BlockManager.add('product-card', {
    label: '产品卡片',
    category: '产品中心组件',
    content: { type: 'product-card' },
    media:`<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 -960 960 960" fill="#5f6368"><path d="M200-160q-33 0-56.5-23.5T120-240v-560q0-33 23.5-56.5T200-880h560q33 0 56.5 23.5T840-800v284q-10-2-19.5-3t-20.5-1h-40v-280H200v560h124q4 22 10.5 42t17.5 38H200Zm0-120v40-560 520Zm80-40h44q8-49 35-90.5t69-69.5H280v160Zm0-240h160v-160H280v160Zm280 440q-66 0-113-47t-47-113q0-66 47-113t113-47h80v80h-80q-33 0-56.5 23.5T480-280q0 33 23.5 56.5T560-200h80v80h-80Zm-40-440h160v-160H520v160Zm40 320v-80h240v80H560Zm160 120v-80h80q33 0 56.5-23.5T880-280q0-33-23.5-56.5T800-360h-80v-80h80q66 0 113 46.5T960-280q0 66-47 113t-113 47h-80Z"/></svg>`
  });
};
